@import "../../style/modules/function";
@import "../../style/modules/color";

.modal {
    display: none;
    font-size: rpx(30);
    background-color: rgba(0, 0, 0, .3);
    z-index: 100;
    align-items: center;
    justify-content: center;

    &.modal-show {
        display: flex;
    }

    .modal-wrapper {
        width: rpx(700);
        margin: 0 auto;
        background-color: #fff;
        border-radius: rpx(5);

        label {
            padding: rpx(50) rpx(30) rpx(80);
            display: block;

            input {
                width: 100%;
                border: 1px solid #ccc;
                height: rpx(80);
                padding: 0 1em;
                text-align: center;
            }
        }

        .btn-group {
            display: flex;
            justify-content: space-between;

            button {
                flex: 1;
                border-radius: 0;
                font-size: rpx(30);
                padding: rpx(10);
                background: #eee;
                color: #444;

                &.confirm {
                    background: $main-color;
                    color: #fff;
                }

                &.hover-class {
                    opacity: .8;
                }
            }

        }
    }

    .modal-header {
        height: rpx(70);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: rpx(30);
    }
}
